<script setup lang="ts">
// 关于我们页面
import { Mic as Magic, Clock as Timer, Lock, Service, Location, Phone, Message } from '@element-plus/icons-vue'
</script>

<template>
  <div class="about-page">
    <!-- 头部区域 -->
    <div class="header-section">
      <div class="container">
        <div class="header-content">
          <h1>关于我们</h1>
          <p>致力于为用户提供最优质的图片水印处理服务</p>
        </div>
      </div>
    </div>

    <!-- 公司介绍 -->
    <div class="company-section">
      <div class="container">
        <div class="grid">
          <div class="card company-info">
            <h2>公司简介</h2>
            <p>我们是一家专注于图片处理技术研发的创新企业，致力于为用户提供简单、高效、安全的图片水印处理解决方案。</p>
            <p>通过持续的技术创新和用户反馈，我们不断优化产品体验，为用户创造更大的价值。</p>
          </div>
          <div class="card company-image">
            <div class="img-container">
              <img 
                src="https://images.pexels.com/photos/3184460/pexels-photo-3184460.jpeg" 
                alt="公司团队" 
                class="company-img"
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 团队介绍 -->
    <div class="team-section">
      <div class="container">
        <h2>核心团队</h2>
        <div class="grid">
          <div class="card team-member">
            <div class="member-avatar">
              <img 
                src="https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg" 
                alt="CEO" 
                class="member-img"
              >
            </div>
            <h3>张明</h3>
            <p class="member-title">CEO</p>
            <p class="member-desc">拥有10年互联网产品开发经验，曾就职于多家知名科技企业</p>
          </div>
          <div class="card team-member">
            <div class="member-avatar">
              <img 
                src="https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg" 
                alt="CTO" 
                class="member-img"
              >
            </div>
            <h3>李强</h3>
            <p class="member-title">CTO</p>
            <p class="member-desc">人工智能专家，专注于计算机视觉和图像处理技术研究</p>
          </div>
          <div class="card team-member">
            <div class="member-avatar">
              <img 
                src="https://images.pexels.com/photos/2379006/pexels-photo-2379006.jpeg" 
                alt="PM" 
                class="member-img"
              >
            </div>
            <h3>王芳</h3>
            <p class="member-title">产品经理</p>
            <p class="member-desc">负责产品规划和用户体验优化，确保产品满足用户需求</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 联系我们 -->
    <div class="contact-section">
      <div class="container">
        <div class="grid">
          <div class="card contact-info">
            <h2>联系我们</h2>
            <div class="contact-details">
              <div class="contact-item">
                <el-icon><Location /></el-icon>
                <span>北京市朝阳区xxx大厦</span>
              </div>
              <div class="contact-item">
                <el-icon><Phone /></el-icon>
                <span>400-xxx-xxxx</span>
              </div>
              <div class="contact-item">
                <el-icon><Message /></el-icon>
                <span>contact@example.com</span>
              </div>
            </div>
          </div>
          <div class="card contact-image">
            <div class="img-container">
              <img 
                src="https://images.pexels.com/photos/3184461/pexels-photo-3184461.jpeg" 
                alt="联系我们" 
                class="contact-img"
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.about-page {
  min-height: 100vh;
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column;
}

/* 头部区域样式 */
.header-section {
  position: relative;
  background: var(--primary-gradient);
  padding: 6rem 0 8rem;
  color: white;
  overflow: hidden;
  z-index: var(--z-header);
}

.header-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.header-content h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-content p {
  font-size: 1.2rem;
  opacity: 0.9;
}

/* 公司介绍样式 */
.company-section,
.team-section,
.contact-section {
  padding: 5rem 0;
}

.company-info,
.team-member,
.contact-info {
  text-align: left;
}

.company-info h2,
.team-section h2,
.contact-info h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--text-color);
}

.company-info p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* 团队成员样式 */
.team-member {
  text-align: center;
}

.member-avatar {
  width: 120px;
  height: 120px;
  margin: 0 auto 1.5rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 3px solid var(--primary-color);
}

.member-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-title {
  color: var(--primary-color);
  font-weight: 600;
  margin: 0.5rem 0;
}

.member-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* 联系信息样式 */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
}

.contact-item .el-icon {
  color: var(--primary-color);
  font-size: 1.2rem;
}

/* 图片容器样式 */
.img-container {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
}

.company-img,
.contact-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .header-section {
    padding: 4rem 0 6rem;
  }

  .header-content h1 {
    font-size: 2.5rem;
  }

  .company-section,
  .team-section,
  .contact-section {
    padding: 3rem 0;
  }
}

@media (max-width: 576px) {
  .header-content h1 {
    font-size: 2rem;
  }

  .header-content p {
    font-size: 1rem;
  }

  .company-info h2,
  .team-section h2,
  .contact-info h2 {
    font-size: 1.75rem;
  }

  .member-avatar {
    width: 100px;
    height: 100px;
  }

  .card {
    padding: 1rem;
  }
}
</style> 